	<template>
		<uni-search-bar @confirm="toSearch" placeholder="请输入搜索的公交地铁线路" v-model="searchkey"></uni-search-bar>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item style="height: 200px;" v-for="(item, index) in lunboList" :key="index">
				<view class="swiper-item">
					<image style="width: 100%;" :src="item.url" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 天气 -->
		<view class="weather" style="height: 100rpx;border: 1px solid #ccc;margin: 5px; border-radius: 5px;display: flex;justify-content: space-between; padding: 10rpx;align-items: center;
			">
			<view class="icon" style="width: 100rpx;height: 100rpx; ">
				<image style="width: 100%;height: 100%;" :src="'/static/weather/icons/'+ weatherNow.icon +'.png'" mode="">
				</image>
			</view>
			<view class="text" style="font-size: 50rpx;margin-left: 10px;">
				{{weatherNow.temp}}°C
			</view>
			<view class="text" style="font-size: 34rpx;margin-left: 10rpx;">
				{{weatherNow.text}}
			</view>
			<view class="text" style=" margin-left: 10rpx;">
				{{weatherNow.windDir}} {{weatherNow.windScale}}级
			</view>
			<view>
				<view class="text" style="margin-left: 10rpx;">
					体感温度： {{weatherNow.feelsLike }}°C
				</view>
				<view class="text" style="margin-left: 10rpx;">
					湿度： {{weatherNow.humidity }}%
				</view>
			</view>
		</view>
		<!-- 热映电影 -->
		<button type="default" @tap="tomovie">热映电影</button>
		
		<uni-section title="认识西安" sub-title="" type="line"></uni-section>
		<video style="width: 100%;" src="/static/video/xian.mp4" :autoplay="false" controls></video>

		<view class="title">西安历史名胜</view>
		<view class="history">
			<view class="item" v-for="(item,index) in jingdianList" :key="index">
				<view class="pic">
					<image :src="item.url" mode="scaleToFill"></image>
				</view>
				<view class="msg">{{item.name}}</view>
			</view>
		</view>
	</template>


	<script setup>
		import {
			onLoad
		} from "@dcloudio/uni-app"
		import {
			ref
		} from 'vue'
		import {
			CONFIG
		} from "../../utils/config.js"
		import {
			userStore
		} from "../../store/userStrore.js"
		onLoad(() => {
			getlunbo()
			getjingdian()
			getWeather()
			getCurrentPos()
		})

		const searchkey = ref("")
		const lunboList = ref([])

		const jingdianList = ref([])

		function toSearch() {
			// console.log("search")
			if (searchkey.value == "") {
				uni.showToast({
					title: "请输入查询的公交地图线路",
					icon: "none"
				})
			} else {
				window.location.href =
					`https://uri.amap.com/line?name=${searchkey.value}&city=029&callnative=0`
			}
		}


		let weatherNow = ref({})
		async function getWeather() {
			let res = await uni.$get(CONFIG.hefeng_now, {
				key: CONFIG.hefeng_key,
				location: CONFIG.hefeng_location
			})
			console.log("lunbo：" + res.data.code)
			if (res.data.code === "200") {
				weatherNow.value = res.data.now
			}
		}


		onLoad(() => {
			getlunbo()
			getjingdian()
			getCurrentPos()
		})

		async function getlunbo() {
			let res = await uni.$get(CONFIG.leanCloud_url + "/1.1/classes/lunbo")
			if (res.statusCode == 200) {
				lunboList.value = res.data.results
			}
			console.log(lunboList.value)
		}

		// 景点
		async function getjingdian() {
			let res = await uni.$get(CONFIG.leanCloud_url + "/1.1/classes/jingdian")
			console.log(res)
			if (res.statusCode == 200) {
				jingdianList.value = res.data.results
			}
			console.log(jingdianList.value)
		}

		function getCurrentPos() {
			uni.getLocation({
				success: function(res) {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
				}
			})
		}



		// 电影
		function tomovie() {
			uni.navigateTo({
				url: "/pages/hotMovie/hotMovie"
			})
		}
	</script>
	<style scoped>
		/* 天气容器样式 */
		.weather-container {
			display: flex;
			/* 使用flex布局 */
			align-items: center;
			/* 垂直居中对齐子元素 */
			background-color: #f5f5f5;
			/* 背景颜色 */
			border-radius: 8px;
			/* 圆角边框 */
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			/* 阴影效果 */
			padding: 10px 20px;
			/* 内边距 */
			overflow: hidden;
			/* 隐藏溢出的内容 */
		}

		/* 天气图标样式 */
		.weather-icon {
			flex-shrink: 0;
			/* 防止图标压缩 */
			margin-right: 15px;
			/* 图标右侧间距 */
		}

		.weather-icon image {
			width: 40px;
			/* 图标宽度减少 */
			height: 40px;
			/* 图标高度减少 */
		}

		/* 天气信息样式 */
		.weather-info {
			display: flex;
			/* 使用flex布局 */
			flex-direction: column;
			/* 信息垂直排列 */
			justify-content: flex-start;
			/* 垂直对齐到顶部 */
			flex-grow: 1;
			/* 允许内容水平扩展 */
		}

		/* 温度样式 */
		.temperature {
			font-size: 20px;
			/* 字体大小减小 */
			font-weight: bold;
			/* 粗体 */
			color: #333;
			/* 字体颜色 */
		}


		.condition {
			font-size: 14px;
			/* 字体大小减小 */
			color: #666;
			/* 字体颜色 */
		}

		/* 风向和风力样式 */
		.wind {
			font-size: 12px;
			/* 字体大小减小 */
			color: #666;
			/* 字体颜色 */
		}

		/* 详细天气信息样式 */
		.details {
			font-size: 14px;
			/* 字体大小与左边相同 */
			color: #999;
			/* 字体颜色 */
			text-align: right;
			/* 文本右对齐 */
			margin-top: -5px;
			/* 上移5像素 */
		}


		/* 景点 */
		.title{
			text-align: center;
		}
		.history {
			display: flex;
			justify-content: space-evenly;
			flex-wrap: wrap;
		}

		.history>.item {
			margin-top: 10rpx;
			width: 350rpx;
			border: 1px solid #ccc;
			border-radius: 5rpx;
			display: flex;

			flex-direction: column;
			align-items: center;
			box-shadow: 3px 3px 3px #eee;
		}

		.history>.item>.pic {
			width: 330rpx;
			height: 200rpx;
			margin-top: 10rpx;
		}

		.history>.item>.pic>image {
			width: 100%;
			height: 100%;
		}
	</style>